<template>
	<view class="p30">
		<!-- 充值列表 -->
		<view class="h100 lh100 ft30">充值站点：</view>
		<!-- 	<view class="TabLan" :class="tabIndex == index ? 'active':'' " v-for="(item, index) in bigArr" :key="item.id"
			@click="tabss(item,index)">
			<view class="cTabLan">
				{{item.name}}
			</view>

		</view>
		<view v-if="agentId == citem.agentId" class="flex_a h100 plr24 bf bd border-r1"
			v-for="(citem, cindex) in apiSettingTopupEntityListArr" :key="citem.id" @click="chooseMeal(citem)"
			:class="mealId == citem.id ? 'AapiSettingTopupEntityListArr' : ''">
			<text class="apiSettingTopupEntityListArr">{{citem.inMoney}}元送{{citem.outMoney}}</text>
		</view> -->

		<view>
			<view class="TabLans" :class="newId == item.id ? 'active':'' " v-for="(item, index) in newList"
				:key="item.id" @click="newEvent(item,index)">
				<view class="cTabLan">
					{{item.address}}
				</view>

				<view class="ss" v-if="newId == item.id">
					<!-- <uni-data-select v-model="value" :localdata="item.apiSettingTopupEntityList" @change="change">
					</uni-data-select> -->
					<!-- <uni-data-select v-model="value" :localdata="range" @change="change">
					</uni-data-select> -->
					<picker @change="change" :range="range" range-key="text" mode="selector">
						<label>{{value || '请选择'}}</label>
					</picker>
				</view>
				<view class="ss" v-else>
					<!-- <uni-data-select v-model="value" :localdata="rangess" @change="change">
					</uni-data-select> -->
          <picker @change="change" :range="rangess" range-key="text" mode="selector">
          	<label>{{'请选择'}}</label>
          </picker>
				</view>
			</view>
		</view>
		<!-- 自定义充值 -->
		<view class="h100 lh100 ft30">自定义充值金额</view>
		<view class="flex_a h100 plr24 bf bd border-r1">
			<input type="number" class="flex1" min="1" maxlength="8" v-model="money" @change="moneyChange"
				placeholder="自定义充值金额" placeholder-class="c9" />
		</view>
		<view class="mb100 h80 lh80 c6">当前可用余额： {{balance.toFixed(2)}} 元</view>
		<view class="mb10 plr30">
			<checkbox-group @change="checkedChange">
				<label>
					<checkbox value="cb" :checked="false" />请确认：
					充值站点：{{newAddress}} -- 充值金额： {{money}} 元
				</label>
			</checkbox-group>
		</view>
		<view class="plr30 mb30">


			<u-button type="primary" shape="circle" @click="recharge">立即充值</u-button>
		</view>
		<view class="flex_aj h60 mb40">
			<text class="c9">点击立即充值即表示您已阅读并同意</text>
			<navigator url="/pages/user/service/detail?type=3" hover-class="none" class="primary">《充值协议》</navigator>
		</view>



	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		mealList,
		recharge
	} from '@/api/user.js'
	export default {
		name: 'recharge',
		data() {
			return {
				rangess: {},
				list: [],
				mealId: 1,
				money: '',
				nameArr: [],
				bigArr: [],
				smailArr: [],
				idArr: [],
				apiSettingTopupEntityList: [],
				apiSettingTopupEntityListArr: [],
				agentId: '',
				agentIdss: '',
				tabIndex: 0,
				tabLiIndex: 0,
				balance: 0,
				checked: false,
				aa: '',
				isTrue: false,
				newId: '',
				addressArr: [],
				newList: [],
				id: 0,
				value: 0,
				ranges: [],
				range: [],
				newAddress: '',
				isNewId: false,
			}
		},

		onLoad(e) {
			console.log('123456789', this.longitudess, this.latitudess);
			this.mealList()
			this.agentId = this.agentIdss
			// this.tabss(this.agentId, this.tabIndex)
			console.log('+++++++++++', this.userInfo);
			this.balance = 0
			this.userInfo.wallet.forEach((item) => {
				this.balance += item.balance
			})
			console.log('e', e);


		},
		onShow() {

		},
		watch: {

			tabIndex: {
				handler(newVal, oldVal) {
					console.log('====', newVal, oldVal);
					if (newVal !== oldVal) {
						this.money = '',
							this.mealId = ''

					}
				},
				deep: true
			},
			newId: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.isNewId = true
					} else {
						this.isNewId = false
					}
					if (newVal && newVal !== oldVal) {
						this.range = [] // 清零
						this.range = this.ranges //恢复原来从后端拿的数据
						// console.log('11111', newVal, oldVal, this.id);
						let data = this.range.filter(function(item) {
							return item.agentId == newVal;
						})
						this.range = data
						console.log('0000000', this.range);

						this.range.forEach((item) => {
							if (this.value == item.value) {
								this.isTrue = true
							}
						})
            this.value = this.range[0].text
            this.mealId = this.range[0].id
            this.money = this.range[0].value
						console.log('111111110000000', this.isTrue, this.range);

					}
				},
				deep: true
			}

		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo || {}
			},
			...mapState({
				longitudess: state => state.user.longitudess,
				latitudess: state => state.user.latitudess,
			})
		},
		methods: {
			change(e) {
				this.money = this.range[e.detail.value].value
				this.value = this.range[e.detail.value].text
        this.mealId = this.range[e.detail.value].id
				console.log("e:", e.detail.value,this.range[e.detail.value].id);
			},

			checkedChange(e) {
				console.log('99999999', e.detail.value);
				if (e.detail.value.length !== 0) {
					this.checked = true

				} else {
					this.checked = false
				}
			},
			...mapActions([
				// 'getConfig', // 将`this.getConfig()` 映射为 `this.$store.dispatch('getConfig')`
				'getUserInfo'
			]),
			newEvent(item, index) {
				this.newId = item.id
				this.newAddress = item.address
        console.log(item, index,'item, index')
			},
			async mealList() {
				const res = await mealList({
					lng: this.longitudess,
					lat: this.latitudess

				})



				this.bigArr = res.data
				this.bigArr.forEach((item) => {
					this.nameArr.push(item.name)
					this.idArr.push(item.id)
					this.apiSettingTopupEntityList.push(item.apiSettingTopupEntityList)
					item.apiSettingTopupEntityList.forEach((sitem) => {
						this.agentIdss = sitem.agentId
					})
				})

				this.apiSettingTopupEntityList.forEach((item) => {
					item.forEach((citem) => {
						this.apiSettingTopupEntityListArr.push(citem)

					})
				})
				this.agentId = this.apiSettingTopupEntityListArr[0].agentId
				// this.money = this.apiSettingTopupEntityListArr[0].inMoney
				this.mealId = this.apiSettingTopupEntityListArr[0].id

				this.newList = res.data
				this.range = this.apiSettingTopupEntityListArr
				let key = 'text'
				let value = 'value'
				this.range.forEach((item) => {
					// 防止添加的属性值为空
					if (item.id) {
						item[key] = item.inMoney + '元送' + item.outMoney
						item[value] = item.inMoney
					} else {
						item[key] = '-'
						item[value] = '0'
					}
				})
        
				this.ranges = this.range
				console.log('44444444', this.range);
			},

			// tabss(item, index) {
			// 	this.agentId = '',
			// 		this.agentId = item.id,
			// 		this.tabIndex = index,
			// 		console.log('======', item.id, item.name, index);
			// },

			// 选择套餐
			// chooseMeal(citem) {
			// 	console.log('1111111111', citem.id);
			// 	this.mealId = citem.id
			// 	this.money = citem.inMoney

			// },
			moneyChange(e) {
				console.log('888888888', e);
        this.newId = ''
				const index = this.list.findIndex(item => item.inMoney == this.money)
        console.log(index,'index')
				if (index == -1) {
					this.mealId = -1
				} else {
					this.mealId = this.list[index].id
				}
			},
			async recharge() {
				if (!this.isNewId) {
					this.toast('请选择你要充值的站点')
				} else {
					if (!this.money) {
						this.toast('充值金额不能为空')
					} else {
						if (!this.checked) {
							this.toast('请勾选确认你要充值的站点与金额')
							return
						} else {
							const data = {
								money: this.money,
								agentId: this.newId,
								// buyMeal:
							}
							if (this.mealId > 0) {
								data.mealId = this.mealId
							}
							const res = await recharge(data)
							this.wx_payment(res.data, result => {
								if (result == 1) {
									this.toast('支付成功', 500)
									setTimeout(async () => {
										await this.getUserInfo()
										this.back()
									}, 500)
								} else if (result == 2) {
									this.toast('取消支付')

								}
							})
						}
					}

				}



			},
		}
	}
</script>

<style lang="scss" scoped>
	.list_item {
		position: relative;
		// width: 300upx;
		height: 112upx;
		padding: 0 16upx;
		margin: 0 16upx 30upx;
		border-radius: 10upx;
		font-size: 32upx;
		font-family: PingFangSC;
		border: 2upx solid #999999;

		.item_icon_w {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 46upx;
			height: 42upx;
			padding: 10upx 0 0 20upx;

			.item_icon {
				position: relative;
				z-index: 2;
			}

			&::after {
				position: absolute;
				bottom: 0;
				left: 0;
				content: '';
				z-index: 0;
				width: 0;
				height: 0;
				border-right: 23upx solid transparent;
				border-top: 21upx solid transparent;
				border-left: 23upx solid transparent;
				border-bottom: 21upx solid transparent;
			}
		}

		&.item_active {
			color: $primary;
			border-color: $primary;

			.item_icon_w {
				&::after {
					border-right-color: $primary;
					border-bottom-color: $primary;
				}
			}
		}
	}

	.TabLan {
		// display: flex;
		// justify-content: flex-start;
		// align-items: center;
		display: inline-block;
		margin-right: 5%;
		margin-bottom: 5%;
		color: blue
	}

	.ss {
		display: block !important;
		width: 50%;
		color: #999999;
	}

	.TabLans {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		display: inline-block;
		margin-right: 5%;
		margin-bottom: 5%;
		color: blue
	}

	.cTabLan {
		margin-bottom: 10upx;
		margin-top: 10upx;
	}

	.active {
		color: red !important;
		padding: 5upx;
		border: 1upx solid #2979ff;
		// line-height: 25upx;
		text-align: center;
	}

	.apiSettingTopupEntityListArr {
		display: inline-block;
	}

	.flexul {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		border: 1upx solid #f5f5f5;
		background-color: #fff;
	}

	.flexli {
		border: 1upx solid #afafaf;
		padding: 5upx;
		margin: 10upx;
		width: 26%;
		text-align: center;
	}

	.AapiSettingTopupEntityListArr {
		border: 1upx solid #2979ff !important;
		color: red !important;
		// background-color: #2979ff;
	}


	/* 下拉列表的样式 */
	.nav-son {
		position: relative;
		/* 让下拉提示信息永远放于下拉内容的上面 */
		z-index: 99;
		border-top: 1upx solid #d1d3d4;
		border-bottom: 1upx solid #d1d3d4;
		background: #fff;
		display: flex;
		height: 40upx;
		align-items: center;
		font-size: 18upx;
	}

	/* 下拉列表 下三角的样式 */
	.nav-son image {
		position: absolute;
		right: 30upx;
		width: 50upx;
		height: 50upx;
	}

	/* 下拉框的样式 */
	.temp {
		/* 默认为不显示 */
		display: none;
		/* 下拉框的宽度， */
		width: 100%;
		/* 下拉框的最大高度 */
		max-height: 750upx;
		overflow-y: scroll;
		padding: 0 0 0 20upx;
		line-height: 100upx;
		background: #fff;
	}

	/* 下拉框内容的样式 */
	.temp view {
		border-bottom: 1upx solid #d1d3d4;
		font-size: 14upx;
		color: #666;
	}

	/* 下拉动画 */
	/* @keyframes Css3 新标签，循环动画 */
	@keyframes slidown {
		from {
			transform: translateY(-100%);
		}

		to {
			transform: translateY(0%);
		}
	}

	.slidown {
		display: block;
		animation: slidown .2s ease-in both;
	}

	/* 上拉动画 */
	@keyframes slidup {
		from {
			transform: translateY(0%);
		}

		to {
			transform: translateY(-100%);
		}
	}

	.slidup {
		display: block;
		animation: slidup .2s ease-in both;
		height: 0upx;
	}

	.text {
		font-size: 12upx;
		color: #666;
		margin-top: 5upx;
	}

	.uni-px-5 {
		padding-left: 10upx;
		padding-right: 10upx;
	}

	.uni-pb-5 {
		padding-bottom: 10upx;
	}

	.radio {
		color: #999;

	}

	label {
		color: #999;
	}

	checkbox {
		// margin-bottom: 20upx;
	}
</style>
